<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<el-input v-model="query.name" placeholder="网点名称" class="handle-input mr10" style="width: 200px"></el-input>
				<el-select v-model="query.status" placeholder="请选择状态" class="handle-input mr10">
					<el-option :key="1" label="正常" :value="1"></el-option>
					<el-option :key="0" label="禁用" :value="0"></el-option>
				</el-select>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
        <el-button type="primary" :icon="Search" @click="resetSearch">重置</el-button>
				<el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
			</div>
			<el-table v-loading="loading" :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="id" label="序号" width="55" align="center"></el-table-column>
				<el-table-column prop="name" label="网点名称" :min-width="120" :show-overflow-tooltip="true" align="center"></el-table-column>
				<el-table-column prop="managerName" label="管理员" :min-width="100" :show-overflow-tooltip="true" align="center"></el-table-column>
				<el-table-column prop="phone" label="联系方式" :min-width="120" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="province" label="省份" align="center">
				</el-table-column>
        <el-table-column prop="city" label="城市"></el-table-column>
        <el-table-column prop="town" label="县区"></el-table-column>
        <el-table-column prop="detailAddress" label="详细地址" :min-width="150" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="longitude" label="经度" :min-width="100" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="latitude" label="纬度" :min-width="100" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="状态" align="center">
				<template #default="scope">
					<el-tag type="success" v-if="scope.row.status == 1">正常</el-tag>
					<el-tag type="danger" v-if="scope.row.status == 0">禁用</el-tag>
				</template>
        </el-table-column>
        <el-table-column prop="remark" label="备注信息" :min-width="120" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" :min-width="160" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<el-button text :icon="Edit" @click="handleEdit(scope.row)">
							编辑
						</el-button>
<!--						<el-button text :icon="Delete" class="red" @click="handleDelete(scope.row.id)">-->
<!--							删除-->
<!--						</el-button>-->
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageNum"
					:page-size="query.pageSize"
					:total="query.total"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" v-model="editVisible" width="50%">
			<el-form label-width="70px">
        <el-form-item label="网点名称">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
		<el-form-item label="网点管理员">
			<el-card shadow="hover">
				<el-descriptions
						:column="2"
						border>
					<template #title>
						<el-button @click="handleSelectedOutletManager(1)" type="warning" size="small">选择管理员</el-button>
					</template>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								姓名
							</div>
						</template>
						{{editForm.managerName}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								账号(手机号码)
							</div>
						</template>
						{{editForm.managerPhone}}
					</el-descriptions-item>
					<el-descriptions-item :span="2">
						<template #label>
							<div class="cell-item">
								注册时间
							</div>
						</template>
						{{editForm.managerCreateTime}}
					</el-descriptions-item>
				</el-descriptions>
			</el-card>
		</el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="editForm.status">
            <el-radio :label="1" :model-value="1">正常</el-radio>
            <el-radio :label="0" :model-value="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
		<el-form-item label="省市区">
			<AddressCascadeSelector @selectedAddress="selectedEditAddress" ref="addressSelectorRef"></AddressCascadeSelector>
		</el-form-item>
		<el-form-item label="详细地址">
			<el-input type="textarea" rows="2" v-model="editForm.detailAddress"></el-input>
		</el-form-item>
        <el-form-item label="备注信息">
          <el-input type="textarea" rows="3" v-model="editForm.remark"></el-input>
        </el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>

		<!-- 新增弹出框 -->
		<el-dialog title="新增" v-model="addVisible" width="50%">
			<el-form label-width="90px">
				<el-form-item label="网点名称">
					<el-input v-model="addForm.name" style="width: 300px"></el-input>
				</el-form-item>
				<el-form-item label="联系方式">
					<el-input v-model="addForm.phone" style="width: 300px"></el-input>
				</el-form-item>
				<el-form-item label="网点管理员">
					<el-card shadow="hover">
						<el-descriptions
								:column="2"
								border>
							<template #title>
								<el-button @click="handleSelectedOutletManager(0)" type="warning" size="small">选择管理员</el-button>
							</template>
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										姓名
									</div>
								</template>
								{{addForm.managerName}}
							</el-descriptions-item>
							<el-descriptions-item>
								<template #label>
									<div class="cell-item">
										账号(手机号码)
									</div>
								</template>
								{{addForm.managerPhone}}
							</el-descriptions-item>
							<el-descriptions-item :span="2">
								<template #label>
									<div class="cell-item">
										注册时间
									</div>
								</template>
								{{addForm.managerCreateTime}}
							</el-descriptions-item>
						</el-descriptions>
					</el-card>
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="addForm.status">
						<el-radio :label="1" :model-value="1">正常</el-radio>
						<el-radio :label="0" :model-value="0">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="省市区">
					<AddressCascadeSelector @selectedAddress="selectedAddAddress" ref="addAddressRef"></AddressCascadeSelector>
				</el-form-item>
				<el-form-item label="详细地址">
				  <el-input type="textarea" rows="2" v-model="addForm.detailAddress"></el-input>
				</el-form-item>
				<el-form-item label="备注信息">
				  <el-input type="textarea" rows="3" v-model="addForm.remark"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="addVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveAdd">确 定</el-button>
				</span>
			</template>
		</el-dialog>

		<!--用户选择器-->
		<WebUserSelector ref="outletManagerDialogRef" @selectedCourier="selectedOutletManager"></WebUserSelector>
	</div>
</template>

<script setup lang="ts" name="basetable">
	import {ref, reactive, nextTick} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { getOutletListApi, addOutletApi, updateOutletApi, deleteOutletApi} from '../api/index';
import AddressCascadeSelector from '../components/AddressCascadeSelector.vue'
	import WebUserSelector from '../components/WebUserSelector.vue'

const query = reactive({
	name: '',
  status:'',
	pageNum: 1,
	pageSize: 10,
	total: 0
});
const loading = ref(false);
const tableData = ref([]);

// 获取表格数据
const getData = async () => {
	loading.value = true;
	const res = await getOutletListApi(query);
	if (res) {
		tableData.value = res.data.content;
		query.total = res.data.count;
	}
	loading.value = false;
};
getData();

// 查询操作
const handleSearch = () => {
	query.pageNum = 1;
	getData();
};
// 重置操作
const resetSearch = () => {
  query.status = '';
  query.name = '';
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageNum = val;
	getData();
};

// 删除操作
const handleDelete = (id: number) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	}).then(async () => {
		const res = await deleteOutletApi(id);
		if (res) {
			ElMessage.success('删除成功');
			await getData();
		}
	}).catch(() => {});
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let editForm = reactive({
  name: "",
  status: "",
  phone: "",
  province: "",
  city: "",
  town: "",
  detailAddress: "",
  remark: ""
});

const addressSelectorRef = ref();
const handleEdit = (row: any) => {
	Object.keys(row).map((key: any) => editForm[key] = row[key]);
	editVisible.value = true;
	nextTick(() => {
		addressSelectorRef.value.initShow(row.province, row.city, row.town);
	});
};
const saveEdit = async () => {
	if (!validForm(editForm)) {
		return ;
	}
	const res = await updateOutletApi(editForm);
	if (res) {
		ElMessage.success("修改成功");
		editVisible.value = false;
		await getData();
	}
};

// 表格新增时弹窗和保存
const addVisible = ref(false);
let addForm = reactive({
	name: "",
	status: 1,
	phone: "",
	province: "",
	city: "",
	town: "",
	detailAddress: "",
	remark: "",
	managerId: "",
	managerPhone: "",
	managerName: "",
	managerCreateTime: ""
});
const addAddressRef = ref();
const handleAdd = () => {
	Object.keys(addForm).map((key: string) => addForm[key] = "");
	addForm.status = 1
	addVisible.value = true;
	nextTick(() => {
		addAddressRef.value.clearSelected();
	});
};
const saveAdd = async () => {
	if (!validForm(addForm)) {
		return ;
	}
	const res = await addOutletApi(addForm);
	if (res) {
		ElMessage.success("添加成功");
		addVisible.value = false;
		await getData();
	}
};

const validForm = (form: any) => {
	if (!form.name) {
		ElMessage.warning("网点名称不能为空");
		return false;
	}
	if (!form.phone) {
		ElMessage.warning("联系方式不能为空");
		return false;
	}
	if (!form.managerId) {
		ElMessage.warning("网点管理员不能为空");
		return false;
	}
	if (!form.town) {
		ElMessage.warning("省市区不能为空");
		return false;
	}
	if (!form.detailAddress) {
		ElMessage.warning("详细地址不能为空");
		return false;
	}
	return true;
};

const selectedAddAddress = (address: any) => {
	console.log("selectedAddAddress", address);
	addForm.province = address.province;
	addForm.city = address.city;
	addForm.town = address.town;
};

const selectedEditAddress = (address: any) => {
	console.log("selectedEditAddress", address);
	editForm.province = address.province;
	editForm.city = address.city;
	editForm.town = address.town;
};

const outletManagerDialogRef = ref();
// 0-新增，1-编辑
const outletManagerType = ref();
const handleSelectedOutletManager = (type: number) => {
	outletManagerDialogRef.value.changeShowByOutletManager(true);
	outletManagerType.value = type;
};

const selectedOutletManager = (param: any) => {
	console.log("selectedOutletManager", param);
	if (outletManagerType.value == 0) {
		addForm.managerId = param.id;
		addForm.managerName = param.name;
		addForm.managerPhone = param.phone;
		addForm.managerCreateTime = param.createTime;
	} else {
		editForm.managerId = param.id;
		editForm.managerName = param.name;
		editForm.managerPhone = param.phone;
		editForm.managerCreateTime = param.createTime;
	}
};

</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 200px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
